<template>
  <div class="echart-legend">
    <FormItem
      :form="form"
      option="echart.legend.show"
      :label="$demoi18n('panel.label.legend')"
      type="switch"
    />
    <FormItem
      v-if="hasProp('legendDisplayType') && form.echart.legend.show"
      :form="form"
      option="echart.legend.displayType"
      :label="$demoi18n('echart.label.legendDisplayType')"
      type="select"
      :options="legendDisplayType"
    />
    <FormItem
      :form="form"
      option="echart.legend.type"
      :label="$demoi18n('echart.label.legendType')"
      type="select"
      :options="legendTypes"
    />
    <FormItem
      :form="form"
      option="echart.legend.orient"
      :label="$demoi18n('echart.label.legendDirection')"
      type="select"
      :options="legendOrigents"
    />
    <FormItem
      v-if="showLegendIcon"
      :form="form"
      option="echart.legend.icon"
      :label="$demoi18n('echart.label.legendShape')"
      type="select"
      :options="legendIcons"
      :show-switch="true"
      controls-position="right"
    />
    <FormItem
      :form="form"
      option="echart.legend.top"
      :label="$demoi18n('echart.label.legendTopDistance')"
      type="number"
      :show-switch="true"
      :show-unit="true"
      controls-position="right"
    />
    <FormItem
      :form="form"
      option="echart.legend.bottom"
      :label="$demoi18n('echart.label.legendBottomDistance')"
      type="number"
      :show-switch="true"
      :show-unit="true"
      controls-position="right"
    />
    <FormItem
      :form="form"
      option="echart.legend.left"
      :label="$demoi18n('echart.label.legendLeftMargin')"
      type="number"
      :show-switch="true"
      :show-unit="true"
      controls-position="right"
    />
    <FormItem
      :form="form"
      option="echart.legend.right"
      :label="$demoi18n('echart.label.legendRightMargin')"
      type="number"
      :show-switch="true"
      :show-unit="true"
      controls-position="right"
    />
    <FormItem
      :form="form"
      option="echart.legend.height"
      :label="$demoi18n('echart.label.legendHeight')"
      type="number"
      :show-switch="true"
      controls-position="right"
    />
    <FormItem
      :form="form"
      option="echart.legend.width"
      :label="$demoi18n('echart.label.legendWidth')"
      type="number"
      :show-switch="true"
      controls-position="right"
    />
    <FormItem
      :form="form"
      option="echart.legend.align"
      :label="$demoi18n('echart.label.tagsAndText')"
      type="select"
      :options="legendAligns"
    />
    <FormItem
      :form="form"
      option="echart.legend.itemGap"
      :label="$demoi18n('echart.label.eachInterval')"
      type="number"
    />
    <FormItem
      :form="form"
      option="echart.legend.textStyle.color"
      :label="$demoi18n('panel.label.fontColor')"
      type="color"
    />
    <div :id="`legend_color_after_${panelWid}`">
      <!-- 代码块占位，会通过Teleport填充内容到这里 -->
    </div>
    <FormItem
      :form="form"
      option="echart.legend.textStyle.fontSize"
      :label="$demoi18n('echart.label.textSize')"
      type="number"
    />
    <FormItem
      :form="form"
      option="echart.legend.textStyle.fontWeight"
      :label="$demoi18n('echart.label.bold')"
      type="select"
      :options="fontWeightOptions"
    />
    <FormItem
      :form="form"
      option="echart.legend.textStyle.fontFamily"
      :label="$demoi18n('echart.label.fonts')"
      type="select"
      :options="fontFamilyOptions"
    />
    <FormItem
      v-if="hasProp('stacked-area')"
      :form="form"
      option="echart.series._emptyName"
      :label="$demoi18n('panel.label.emptyValLine')"
      type="radio"
      :options="emptyNames"
      serie-type="line"
    />
  </div>
</template>
<script>
import FormItem from '@/components/common/echart/form-item.vue';
import {
  fontWeightOptions,
  fontFamilyOptions,
  legendTypes,
  legendOrigents,
  legendAligns,
  legendIcons,
  legendDisplayType,
  emptyNames,
} from '@/components/common/echart/form-item-options.js';
import panelsConf from '@/components/common/echart/echart-panels-config.js';

export default {
  components: { FormItem },
  inject: {
    panelWid: {
      default: '',
    },
  },
  props: {
    form: Object,
  },
  data() {
    return {
      fontWeightOptions,
      fontFamilyOptions,
      legendTypes,
      legendOrigents,
      legendAligns,
      legendIcons,
      legendDisplayType,
      emptyNames,
    };
  },
  computed: {
    showLegendIcon() {
      const compName = this.form?.echart?._componentName;
      const excludes = ['biaxial-single-line-bar', 'biaxial-line-bar'];
      if (excludes.includes(compName)) {
        return false;
      }
      return true;
    },
  },
  watch: {},
  methods: {
    hasProp(key) {
      const { _componentName } = this.form.echart || {};
      if (!_componentName) {
        return false;
      }
      if (_componentName.includes(key)) {
        return true;
      }
      const conf = panelsConf[_componentName] || {};
      return conf[key];
    },
  },
};
</script>
<style lang="less" scoped></style>
